<template>
  <div class="table_muban">
    <el-row class="table_search">
      <el-col :span="24">
        <template>
          <el-select v-model="value" placeholder="请选择机构">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input style="margin-left: 20px"
            placeholder="请输入用户姓名搜索"
            v-model="inputVar"
            clearable>
          </el-input>
          <el-button type="primary" @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
        </template>
      </el-col>
    </el-row>

    <el-row class="table_btn">
      <el-col :span="24" class="text-r">
        <el-button type="danger" icon="el-icon-plus" style="margin-left: 20px">新增人员</el-button>
        <el-button type="danger" icon="el-icon-plus" style="margin-left: 20px">批量新增</el-button>
        <el-button type="danger" icon="el-icon-plus" style="margin-left: 20px">导出</el-button>
      </el-col>
    </el-row>

    <template>
      <el-table
        size="mini"
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        style="width: 100%">
        <el-table-column
          align="center"
          prop="date"
          label="日期"
          width="250">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="姓名"
          width="250">
        </el-table-column>
        <el-table-column
          align="center"
          width="250"
          prop="address"
          label="地址">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary"  size="mini" @click="retract(scope.$index, scope.row)">编辑</el-button>
            <el-button type="danger"  size="mini" @click="retract(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <div class="block footerBox">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="tableData.length">
        </el-pagination>
      </div>
    </template>

  </div>
</template>

<script>

  export default {
    data: function (){
      return {
        options: [
          {
            value: '选项1',
            label: '黄金糕'
          }
          ,
          {
            value: '选项2',
            label: '双皮奶'
          },
          {
            value: '选项3',
            label: '蚵仔煎'
          },
          {
            value: '选项4',
            label: '龙须面'
          },
          {
            value: '选项5',
            label: '北京烤鸭'
          }],
        value: '',
        input10: '',
        inputVar: '',
        tableData: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-02',
            name: '小熊',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 517 弄'
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 119 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 156 弄'
          },
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 151 弄'
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 17 弄'
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 9 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1 弄'
          },
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1877 弄'
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 151777 弄'
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 15179 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 177516 弄'
          },{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 771518 弄'
          },
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 71517 弄'
          },
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 15190 弄'
          },
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 6 弄'
          }
        ],
        currentPage: 1,
        pageSize:10
      }
    },
    methods: {
      handleSizeChange: function (size) {
        this.pageSize = size;
      },
      handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
      },
      searchFun(){
        //请求接口返回数据
      }

    }
  }
</script>

<style scoped>
  .table_search, .table_btn{
    height: 60px;
    margin-bottom: 10px;
    background: #fff;
    padding: 10px 20px 30px;
  }
  .el-input{
    width: auto;
  }
  .text-r{
    text-align: right;
  }
  .footerBox {
    width: 100%;
    height: 50px;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 9px;
    text-align: right;
  }
</style>
